require('../../less/controls/input.less');
require('codemirror/lib/codemirror.css');
require('codemirror/addon/display/fullscreen.css');
require('codemirror/theme/night.css');

require('codemirror/mode/xml/xml.js');
require('codemirror/addon/display/fullscreen.js');
var React = require('react');
var CodeMirror = require('codemirror');
var Select = require('./Select');
var Uploader = require('./Uploader');
var CheckboxGroup = require('./CheckboxGroup');
var RadioGroup = require('./RadioGroup');
module.exports = React.createClass({
	displayName: 'Input',
	getInitialState:function(){
		var _placeholder = this.props.placeholder || '';
		if(this.props.type=='file'){
			_placeholder = 'Choose File ...';
		}

		return {
			status: this.props.status||'',
			placeholder: _placeholder
		}
	},
	componentDidMount:function(){
		if(this.props.type=="codemirror"){
			this._editor = CodeMirror.fromTextArea(this.refs.code.getDOMNode(), {
		      	lineNumbers: true,
		      	theme: "night",
			    lineWrapping: true,
		      	extraKeys: {
		        	"F11": function(cm) {
		          		cm.setOption("fullScreen", !cm.getOption("fullScreen"));
		        	},
		        	"Esc": function(cm) {
		          		if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
		        	}
		      	}
		    });
		}
		this.props.onDidMount && this.props.onDidMount(this);
	},
	getValue: function (){
		return this._value;
	},
	getText: function (){
		return this._text;
	},
	__onChange: function (event, value, owner){
		var _target = event.nativeEvent.target,
			_value, _text;

		switch (this.props.type) {
			case 'checkbox':
				_text = value.value.join(owner.props.sep);
				_value = _text;
				break;
			case 'radio':
				_text = value.value.text;
				_value = value.value.value;
				break;
			case 'select':
				_text = value.text;
				_value = value.value;
				break;
			case 'file':
				_value = _text = _target.files[0].name;
				this.setState({
					placeholder: _value
				});
				break;
			default:
				_value = _text = _target.value;
				break;
		}
		this.__onValueChange(_text, _value);
	},
	__onValueChange: function (text, value){
		this._text = text;
		this._value = value;
		this.props.onInputChange && this.props.onInputChange(this.props.name, {
			text: text,
			value: value,
			props: this.props
		}, this);
	},
	__onBlur: function (event){
		event.self = this;
		this.validate();
		this.props.onBlur && this.props.onBlur(event);
	},
	__onFocus: function (event){
		event.self = this;
		this.props.onFocus && this.props.onFocus(event);
	},
	__inputRender: function (){
		var _type = this.props.type||'text';
		switch (_type) {
			case 'label':
				return <label>{this.props.text}</label>;
			case 'checkbox':
				return <CheckboxGroup onChange={this.__onChange} layout="block" {...this.props} />;
			case 'radio':
				return <RadioGroup onChange={this.__onChange} layout="block" {...this.props} />;
			case 'select':
				return <Select onChange={this.__onChange} icon="fa-caret-down" {...this.props} />;
			case 'uploader':
				return <Uploader onChange={this.__onChange} {...this.props} />;
			case 'file':
				return <a className="input choose-file">
					<i className="fa fa-file"></i>
					<span>{this.state.placeholder}</span>
					<input className="input" type={_type} name={this.props.name} onChange={this.__onChange} />
				</a>;
			case 'codemirror':
				return <textarea ref="code" name="code">{this.props.value}</textarea>;
			case 'textarea':
				return <textarea name={this.props.name} onChange={this.__onChange} onBlur={this.__onBlur} onFocus={this.__onFocus} placeholder={this.props.placeholder}>{this.props.value}</textarea>;
			default:
				return <input type={_type} name={this.props.name} value={this.props.text} onChange={this.__onChange} onBlur={this.__onBlur} onFocus={this.__onFocus} placeholder={this.props.placeholder} />;
		}
	},
	validate: function (){
		if(this.props.required&&(!this._text||!this._value)){
			this.setState({
				status: 'danger'
			});
			return false;
		}
		this.setState({
			status: 'success'
		});
		return {
			name: this.props.name,
			text: this._text,
			value: this._value
		};
	},
	render:function(){
		var _style = this.props.style || {};
		_style.width = this.props.width;
		return (
			<div className={"c-input " + (this.props.className||"") + " " + this.state.status} style={_style}>
				{this.__inputRender()}
			</div>
		);
	}
});
